<!DOCTYPE html>
<html lang="en" xmlns:th="https://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <title>MyPetStore</title>
  <link rel="StyleSheet" href="../css/common.css" type="text/css" media="screen" />
    <script src="/js/jquery-3.6.0.min.js"></script>
<!--  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>-->
</head>
<body>
<header th:fragment="header1">
  <div id="w">
    <div id="Header">
      <div id="Logo">
        <div id="LogoContent">
          <a href="/index"> <img src="../images/logo-topbar.gif" /></a>
        </div>
      </div>
      <div id="Menu">
        <div id="MenuContent">
          <a href="/user/cart" th:if="${session.loginUser != null}"><img align="middle" name="img_cart" src="../images/cart.gif" /></a>
          <img align="middle" src="../images/separator.gif" th:if="${session.loginUser != null}" />
          <span th:if="${session.loginUser == null}">
                        <a href="/user/loginByNameForm">Sign in</a>
                        <img align="middle" src="../images/separator.gif" />
                    </span>
          <span th:if="${session.loginUser != null}">
<!--                        <span th:text="${session.loginUser}"></span>-->
                        <a href="/user/signOut">Sign Out</a>
                        <img align="middle" src="../images/separator.gif" />
                        <a href="/user/accountForm">My Account</a>
                        <img align="middle" src="../images/separator.gif" />
                        <a href="/user/order">My order</a>
                        <img align="middle" src="../images/separator.gif" />
                    </span>
          <a href="/helpForm">Help</a>
          <img align="middle" src="../images/separator.gif" />
            <div id="chatContent" th:if="${session.loginUser != null}">
                <a href="/user/chatForm"><img src="../images/chat.png" /></a>
            </div>
        </div>
      </div>
    </div>

      <div id="QuickLinks">
          <a class="top-a" th:each="category:${session.categoryList}" th:href="@{/categoryForm(categoryId=${category.catid}) }" th:text="${category.catid} + ' / '">
          </a>

          <!--            <a href="/categoryForm?categoryId=FISH"><img src="../images/sm_fish.gif" /></a>-->
          <!--            <img src="../images/separator.gif" />-->
          <!--            <a href="/categoryForm?categoryId=DOGS"> <img src="../images/sm_dogs.gif" /></a>-->
          <!--            <img src="../images/separator.gif" />-->
          <!--            <a href="/categoryForm?categoryId=REPTILES"><img src="../images/sm_reptiles.gif" /></a>-->
          <!--            <img src="../images/separator.gif" />-->
          <!--            <a href="/categoryForm?categoryId=CATS"><img src="../images/sm_cats.gif" /></a>-->
          <!--            <img src="../images/separator.gif" />-->
          <!--            <a href="/categoryForm?categoryId=BIRDS"><img src="../images/sm_birds.gif" /></a>-->
      </div>

    <div id="Search">
      <div id="SearchContent">
        <form action="/getProductListByKey" method="get">
          <tr>
            <td>
              <input type="text" name="keyword" size="12" id="keyWord" placeholder="search the name">
            </td>
            <td>
              <input type="submit" name="searchProduct" value="Search" >
            </td>
          </tr>

<!--          <td th:text="${errorMsg}">error</td>-->
        </form>
          <div id="productAutoComplete">
              <ul id="productAutoList">

              </ul>
          </div>
      </div>
    </div>
  </div>
</header>
<script src="../js/searchBykeyWord.js"></script>
</body>
</html>